<template>
  <div>
    <div class="az" v-if="classStatus.selectShow">
      <span @click="getLetter(index,item)" :class="{active:index===classStatus.classIndex}" v-for="(item, index) in arr" :key="index">{{item}}</span>
    </div>
    <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit
              style="width: 100%" max-height="580" @header-click="classClick">
      <el-table-column width="220px" align="center" label="id" v-if="false">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220px" align="center" label="分类" v-if="false">
        <template slot-scope="scope">
          <span>{{scope.row.attr_type}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220px" align="center" label="一个字描述" v-if="false">
        <template slot-scope="scope">
          <span>{{scope.row.attr_short_name}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220px" align="center" label="一级属性id" v-if="false">
        <template slot-scope="scope">
          <span>{{scope.row.class_1_id}}</span>
        </template>
      </el-table-column>
      <el-table-column width="300px" align="center" :label="classStatus.className">
        <template slot-scope="scope">
          <span>{{scope.row.attr_name}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220px" align="center" label="包含属性量">
        <template slot-scope="scope">
          <span>{{scope.row.class_2_num}}</span>
        </template>
      </el-table-column>
      <!-- </el-table-column> -->
      <el-table-column align="center" label="创建时间" width="300px">
        <template slot-scope="scope">
          <span>{{scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后修改时间" width="300px">
        <template slot-scope="scope">
          <span>{{scope.row.update_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="220px">
        <template slot-scope="scope">
          <span>{{scope.row.status_text}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="220px">
        <template slot-scope="scope">
          <div class="b1" v-if="scope.row.can_up=='1'">
            <el-button type="warning" icon="el-icon-edit" circle @click="handleProp(scope.row)">
            </el-button>修改
          </div>
          <div class="b2" v-if="scope.row.action_status=='1'">
            <el-button type="success" icon="el-icon-delete" circle @click="deleteProp(scope.row)">
            </el-button>删除
          </div>
          <div class="b3" v-if="scope.row.action_status=='2'">
            <el-button type="danger" icon="el-icon-refresh" circle @click="updateStatus(scope.row)">
            </el-button>停用
          </div>
          <div class="b4" v-if="scope.row.action_status=='3'">
            <el-button type="danger" icon="el-icon-refresh" circle @click="updateStatus(scope.row)">
            </el-button>重启
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
  .b1 {
    color: #f8a631;
    margin-right: 15px;
    display: inline-block;
  }
  .b1 button {
    margin-right: 5px;
    padding: 6px;
  }
  .b2 {
    color: #63c847;
    margin-right: 15px;
    display: inline-block;
  }
  .b2 button {
    margin-right: 5px;
    padding: 6px;
  }
  .b3 {
    color: #fc4f4f;
    margin-right: 15px;
    display: inline-block;
  }
  .b3 button {
    margin-right: 5px;
    padding: 6px;
  }
  .b4 {
    color: #fc4f4f;
    margin-right: 15px;
    display: inline-block;
  }
  .b4 button {
    margin-right: 5px;
    padding: 6px;
  }
  .az {
    width: 100%;
    padding: 2px 30px;
    background: #f5f5f5;
    /* position: absolute;
    top: 100px;
    left: 0;
    z-index: 1; */
  }
  .az span {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    color: #666;
    text-align: center;
    display: inline-block;
    cursor: pointer;
  }
  .az span:hover {
    background: #dbdbdb;
  }
  .active {
    background: #dbdbdb;
  }
</style>

<script>
  export default {
    props: {
      list: Array,
      listLoading: Boolean,
      tab: String,
      classStatus: Object
    },
    data() {
      return {
        actionStatus: [
          '停用',
          '重启'
        ],
        arr: ['全', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      }
    },
    created() {
    },
    methods: {
      classClick(row) {
        if (row.label === '分类名称▼') {
          this.classStatus.selectShow = true
          this.classStatus.className = '分类名称▲'
        }
        if (row.label === '分类名称▲') {
          this.classStatus.selectShow = false
          this.classStatus.className = '分类名称▼'
        }
      },
      getLetter(index, letter) {
        this.classStatus.classIndex = index
        this.$emit('selectFirstProp', letter)
      },
      handleProp(row) {
        if (this.tab === '1') {
          this.$emit('updateFirstProp', row)
        } else if (this.tab === '2') {
          this.$emit('updateSecondProp', row)
        }
      },
      deleteProp(row) {
        this.$emit('deleteProp', row)
      },
      updateStatus(row) {
        this.$emit('updateStatus', row)
      }
    }
  }
</script>
